<template>
  <div
    :class="column==3 ? 'three-goods-wrap': ''"
    class="multi-row-goods">
    <ul :class="['multi-goods-box','multi-goods-box'+tplItemData.goodstyle,column==2?'biserial-goods-box':'three-goods-box']" >
      <li :class="['multi-goods-item','multi-goods-item'+tplItemData.goodstyle]" v-for="(goods,index) in tplItemData.goodslist" :key="index">
        <a class="goodsimg" href="javascript:;" @click="openLink(goods.link)">
          <img
            :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
            alt
          />
          <!-- 已售罄 -->
          <b v-if="goods.is_sell_out == 1" class="sold-out">已售罄</b>
        </a>
        <div class="goods-info">
          <a href="javascript:;" @click="openLink(goods.link)"
              :class="['title','title'+tplItemData.goodstyle,tplItemData.titleLine==1?'multiLine':'']" 
              v-if="tplItemData.showName == 1 ||tplItemData.showName ==true">
              <span class="seckill" v-if="recoGoods">推荐</span>
              <span class="seckill" v-if="goods.is_self_support == 1">自营</span>
            {{goods.title}}
          </a>
          <div class="goods-tips">
            <span class="seckill" v-if="goods.is_miao && goods.is_miao==1">{{goods.actives_title}}</span>
            <span class="seckill" v-else-if="goods.is_bargin && goods.is_bargin == 1">砍价</span>
            <span class="seckill" v-else-if="goods.is_cycle && goods.is_cycle == 1 ">周期购</span>
            <span class="seckill" v-else-if="goods.is_crowd && goods.is_crowd == 1">{{goods.label}}</span>
            <span class="seckill" v-else-if="goods.is_group_shopping && goods.is_group_shopping == 1">团购</span>
            <span class="seckill" v-else-if="goods.discount && goods.discount !=10 && goods.rank_price ==null">
              <!-- {{goods.discount}}折 -->
              <span v-if="goods.discount_sta==1">限时 ¥{{goods.discount}}</span>
              <span v-else>{{ goods.discount }}折</span>
            </span>
            <span class="seckill" v-else-if="goods.is_auction && goods.is_auction == 1">拍卖</span>
            <span class="seckill" v-else-if="goods.is_bmd==1">多买优惠</span>
            <span class="seckill greencol" v-if="goods.is_presale == 1">预售</span>
            <span class="seckill greencol" v-if="goods.is_time_purchase == 1">限时购</span>
          </div>
          <div class="goods-labels" v-if="goods.item_labels && goods.item_labels.length>0"><span>{{goods.item_labels}}</span></div>
          <!-- 样式B-->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && tplItemData.goodstyle == 2">
            <em class="selled-num" v-if="goods.sale_num !== false">已售{{goods.sale_num}}件</em>
          </p>
          <!-- 样式A,B,C-->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && (tplItemData.goodstyle == 1 || tplItemData.goodstyle == 2|| tplItemData.goodstyle == 3)">
            <s class="original-price" v-if="displayOriginalPrice==1 && goods.original_price">&yen;{{goods.original_price}}</s>
            <span class="point" v-if="goods.buy_need_points !=0">
                <i class="plus">+</i>
                <i class="num">{{goods.buy_need_points}}</i>
                <i class="name">{{tplItemData.point_name}}</i>
            </span>
          </p>
          <!-- 样式A,B,C,I-->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && (tplItemData.goodstyle == 1 || tplItemData.goodstyle == 2|| tplItemData.goodstyle == 3|| tplItemData.goodstyle == 9)">
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
             <em class="selled-num" v-if="(goods.sale_num !== false) && tplItemData.goodstyle != 2 && tplItemData.layout!=4">已售{{goods.sale_num}}件</em>
          </p>

          <!-- 样式D,F,G,H -->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && ( tplItemData.goodstyle == 4 || tplItemData.goodstyle == 6 || tplItemData.goodstyle == 7 || tplItemData.goodstyle == 8)">
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
            <span class="point" v-if="goods.buy_need_points !=0">
                <i class="plus">+</i>
                <i class="num">{{goods.buy_need_points}}</i>
                <i class="name">{{tplItemData.point_name}}</i>
            </span>
          </p>
          <!-- 样式G-->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.goodstyle == 7">
            <s class="original-price" v-if="displayOriginalPrice==1 && goods.original_price">&yen;{{goods.original_price}}</s>
          </p>
          <!-- 样式F -->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && (tplItemData.goodstyle == 6)">
            <em class="selled-num" v-if="goods.sale_num !== false">已售{{goods.sale_num}}件</em>
          </p>

          <!-- 样式E -->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && ( tplItemData.goodstyle == 5)">
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
           
            <s class="original-price" v-if="displayOriginalPrice==1 && goods.original_price">&yen;{{goods.original_price}}</s>
            <em class="selled-num" v-if="goods.sale_num !== false && tplItemData.layout != 4">已售{{goods.sale_num}}件</em>
          </p>
          <!-- 样式E -->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && ( tplItemData.goodstyle == 5)">
            <span class="point" v-if="goods.buy_need_points !=0">
                <i class="plus">+</i>
                <i class="num">{{goods.buy_need_points}}</i>
                <i class="name">{{tplItemData.point_name}}</i>
            </span>
          </p>
         
          <!-- 样式J,K,L,M,N -->
          <p :class="['pic_box','pic_box'+tplItemData.goodstyle]" v-if="tplItemData.showPrice && (tplItemData.goodstyle == 10 || tplItemData.goodstyle == 11 || tplItemData.goodstyle == 12 || tplItemData.goodstyle == 13 || tplItemData.goodstyle == 14)">
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
          </p>

          <!-- 加入购物车按钮 -->
          <!-- 样式B,F,G -->
          <a v-if="tplItemData.goodstyle == 2 || tplItemData.goodstyle == 6 || tplItemData.goodstyle == 7" :class="['addcart', 'addcartstyles'+tplItemData.goodstyle]">
            <i class="shop-car" v-if="goods.is_try==1 || goods.is_miao==1 || goods.is_bargin==1 || goods.is_crowd==1 || goods.is_limit_discount==1 || goods.is_group_shopping==1 || goods.is_auction==1 || goods.num<=0" @click="openLink(goods.link)"></i>
            <i @click="handleOpenSkuDialog(goods)"></i>
          </a>
          <!-- 样式C -->
          <a v-if="tplItemData.goodstyle == 3" :class="['addcart', 'addcartstyles'+tplItemData.goodstyle]" href="javascript:;" @click="openLink(goods.link)">{{tplItemData.goodstxt}}</a>
          <!-- 样式H -->
          <p class="goods-btn" v-if="tplItemData.goodstyle == 8">
            <a v-if="tplItemData.goodstyle == 8" :class="['addcart', 'addcartstyles'+tplItemData.goodstyle]" href="javascript:;" @click="openLink(goods.link)">{{tplItemData.goodstxt}}&nbsp;&gt;</a>
          </p>
        </div>
        <!-- 商品分组角标 -->
        <div class="pic-tips" v-if="itemPic">
          <img :src="itemPic" alt="">
        </div>

        <!-- 角标 -->
        <div class="corner-mark" v-if="tplItemData.cornerMark && tplItemData.cornerMark!=1">
          <img v-if="tplItemData.cornerMark==2" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/xinpin.png"/>
          <img v-if="tplItemData.cornerMark==3" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/remai.png"/>
          <img v-if="tplItemData.cornerMark==4" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/new.png"/>
          <img v-if="tplItemData.cornerMark==5" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/hot.png"/>
        </div>
      </li>
    </ul>
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>
  </div>
</template>

<script>
import skuDialog from '@/views/item/components/skuDialog'
import { scaleGoodsPrice } from '@/utils/index'
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'
import Vue from 'vue'

export default Vue.extend({
  components: {
    skuDialog
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    },
    column: {
      type: [Number, String],
      default: 2
    },
    recoGoods: {
      type: Boolean,
      default: false
    },
    itemPic: {
      tpye: String,
      default: ''
    }
  },
  data() {
    return {
      // goodstyle: 0
      skuDialogVisible: false,
      itemId: 0
    }
  },
  computed: {
    ...mapGetters(['displayOriginalPrice'])
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    /**
       * 打开SKU弹窗
       */
    handleOpenSkuDialog(data) {
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
      const that = this
      if (buy_need_fans == 1) {
        that.$isFans(() => {
          this.$Error('请先等待商家绑定公众号')
          return false
        }, () => {
          that.$refs.shopCode.dialogVisible = true
          return false
        }, () => {
          // 打开sku弹窗
          that.skuDialogVisible = true
          that.itemId = Number(data.item_id)
        })
      } else {
        // 打开sku弹窗
        that.skuDialogVisible = true
        that.itemId = Number(data.item_id)
      }
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.multi-row-goods{
  a{
    display: block;
  }
  // 图片样式
  .goodsimg{
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    img{
      position: absolute;
      top: 0;
      width: 100%;
    } 
    .sold-out{
      position:absolute;
      top: 20px;
      left: -46px;
      width:180px;
      height:50px;
      line-height:50px;
      transform:rotate(-45deg);
      font-size:24px;
      text-align:center;
      color:#fff;
      background:#000;
      opacity: 0.5;
    }
  }
  // 商品信息
  .goods-info{
    position: relative;
    .title{
      .seckill{
        display: inline-block;
        @include gradient(left,rgba(255,42,64,1),rgba(254,60,112,1));
        padding: 0 15px;
        margin-right: 6px 3px;
        font-size: 20px;
        border-radius: 17px;
        line-height: 34px;
        height: 34px;
        color: #fff;
      }
      @include lineClamp(26px,38px,1);
      &.multiLine{
        @include lineClamp(26px,38px,2);
        height: 76px;
      }
    }
    .pic_box{
      overflow: hidden;
      .original-price,.selled-num{
        color: #999999;
        font-size: 22px;
        margin-left: 20px;
      }
      .point{
        display: inline-block;
        border:1px solid #F20B22;
        margin-left: 6px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 20px;
        line-height: 30px;
        height: 30px;
        color: #F20B22;
      }
    }
    .goods-btn{
      text-align: center;
      padding: 10px;
    }
    .addcart{
      i{
        display: block;
        width: 100%;
        height: 100%;
      }
      &.addcartstyles2{
        width: 50px;
        height: 50px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png) center/cover no-repeat;
      }
      &.addcartstyles3{
        border-radius: 24px;
        @include gradient(left,rgba(233,1,4,1),rgba(254,27,73,1));
        color: #fff;
        padding: 0 12px;
        font-size: 24px;
        height: 48px;
        line-height: 48px;
        text-align: center;
      }
      &.addcartstyles6,&.addcartstyles7{
        width: 50px;
        height: 50px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png) center/cover no-repeat;
      }   
      &.addcartstyles7{
        width: 30px;
        height: 30px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/diy/goods/icon_addcart06.png) center/cover no-repeat;
      }
      &.addcartstyles8{
        display: inline-block;
        width: auto;
        height: 36px;
        padding: 0 20px;
        line-height: 36px;
        border: 1px solid #676767;
        border-radius: 40px;
        color: #676767;
        overflow: hidden;
      }
    }
  }
}
.multi-goods-box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.multi-goods-item{
  background: #fff;
  overflow: hidden;
  width: 50%;
  box-sizing: border-box;
  &.multi-goods-item1{
    .goods-info{
      padding: 0 10px;
      .pic_box{
        &.pic_box1{
          line-height: 40px;
          .original-price,.selled-num{
            margin-left: 0;
          }
          .selled-num{
            float: right;
          }
        } 
      }
    }
  }
  &.multi-goods-item2{
    .goods-info{
      padding: 0 10px 20px;
      .pic_box{
        &.pic_box2{
          line-height: 40px;
          .original-price,.selled-num{
            margin-left: 0;
          }
          
        } 
      }
      .addcart{
        position: absolute;
        right: 20px;
        bottom: 20px;
      }
    }
  } 
  &.multi-goods-item3{
    .goods-info{
      padding: 0 10px 20px;
      .pic_box{
        &.pic_box3{
          line-height: 40px;
          .original-price,.selled-num{
            margin-left: 0;
          }
          .selled-num{
            float: right;
          }
        } 
      }
    }
    .addcart{
      margin-top: 10px;
    }
  }
  &.multi-goods-item4{
    border: 1px solid #ededed;
    .goods-info{
      padding: 10px 10px 10px;
    }
    .pic_box{
      &.pic_box4{
        line-height: 40px;
        text-align: center;
      }
    }
  }
  &.multi-goods-item5{
    .goods-info{
      padding: 0 10px 10px;
    }
    .pic_box{
      &.pic_box5{
        line-height: 40px;
      }
    }
  }
  &.multi-goods-item6{
    .goods-info{
      padding: 10px 10px 20px;
    }
    .pic_box{
      &.pic_box6{
        line-height: 40px;
      }
    }
    .addcart{
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  &.multi-goods-item7{
    .goods-info{
      padding: 10px 10px 20px;
    }
    .pic_box{
      &.pic_box7{
        line-height: 40px;
        .original-price{
          margin-left: 0;
        }
      }
    }
    .addcart{
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  &.multi-goods-item8{
    background: transparent;
    .goodsimg{
      border-radius: 12px;
      overflow: hidden;
    }
    .goods-info{
      padding: 10px 10px 10px;
    }
    .pic_box{
      &.pic_box8{
        line-height: 40px;
        text-align: center;
      }
    }
  }
  &.multi-goods-item9{
    border: 1px solid #eee;
    .goods-info{
      padding: 0 10px 10px;
      .pic_box{
        &.pic_box9{
          line-height: 40px;
          .original-price,.selled-num{
            margin-left: 0;
          }
          .selled-num{
            float: right;
          }
        } 
      }
    }
  }
  &.multi-goods-item10{
    .goods-info{
      padding: 0 10px 10px;
      .pic_box{
        &.pic_box10{
          line-height: 40px;
          text-align: right;
        } 
      }
    }
  }
  &.multi-goods-item11{
    border-top: 1px solid #e8e8e8;
    &:nth-of-type(odd) {
      border-right: 1px solid #e8e8e8;
    }
    .goods-info{
      padding: 0 10px 10px;
      .pic_box{
        &.pic_box11{
          line-height: 40px;
        } 
      }
    }
  }
  &.multi-goods-item12{
    border: 1px solid #e8e8e8;
    .goods-info{
      padding: 10px 10px 10px;
      .pic_box{
        &.pic_box12{
          line-height: 60px;
        } 
      }
    }
  }
  &.multi-goods-item13{
    box-sizing: border-box;
    padding: 10px;
    background: #f5f5f5;
    .goods-info{
      padding: 10px 10px 10px;
      .pic_box{
        &.pic_box13{
          line-height: 60px;
        } 
      }
    }
  }
  &.multi-goods-item14{
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0 0 4px rgba(159,159,159,.3);
    border-radius: 10px;
    .goods-info{
      padding: 10px 10px 10px;
      .pic_box{
        &.pic_box14{
          line-height: 60px;
        } 
      }
    }
  }
}
// 所有宽度兼容
.biserial-goods-box{
  .multi-goods-item{
    &.multi-goods-item1,
    &.multi-goods-item2,
    &.multi-goods-item3,
    &.multi-goods-item4,
    &.multi-goods-item5,
    &.multi-goods-item6,
    &.multi-goods-item10{
      width:calc(50% - 4px);
      margin-bottom: 8px;
    }
    &.multi-goods-item6{
      border-radius: 8px;
    }
    &.multi-goods-item7,
    &.multi-goods-item8,
    &.multi-goods-item9{
      width:calc(50% - 10px);
      margin-bottom: 20px;
      border-radius: 8px;
    }
    &.multi-goods-item11{
      width: calc((100% - 2px)/ 2);
    }
    &.multi-goods-item12,
    &.multi-goods-item13,
    &.multi-goods-item14{
      width:calc(50% - 10px);
      margin-bottom: 20px;
    }
  }
}
.three-goods-wrap{
  .three-goods-box{
    justify-content:left;
    .multi-goods-item{
      &:nth-of-type(3n){
        margin-right: 0;
      }
    }
  }
}
.three-goods-box{
  .multi-goods-item{
    &.multi-goods-item1,
    &.multi-goods-item2,
    &.multi-goods-item3,
    &.multi-goods-item4,
    &.multi-goods-item5,
    &.multi-goods-item6,
    &.multi-goods-item10{
      width: calc((100% - 16px)/ 3);
      margin-bottom: 8px;
      margin-right: 8px;
    }
    &.multi-goods-item6{
      border-radius: 8px;
    }
    &.multi-goods-item7,
    &.multi-goods-item8,
    &.multi-goods-item9{
      width: calc((100% - 40px)/ 3);
      margin-right: 20px;
      margin-bottom: 20px;
      border-radius: 8px;
    }
    &.multi-goods-item11{
      width: calc((100% - 8px)/ 3);
    }
    &.multi-goods-item12,
    &.multi-goods-item13,
    &.multi-goods-item14{
      width: calc((100% - 40px)/ 3);
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
}


</style>
<style lang="scss">
.multi-row-goods{
  .pic_box{
    .fwt_normal{
      .price-scale{
        font-weight: 300;
      }
    }
  }
  .pic_box4{
    .price-scale{
      color: #ecba59;
    }
  }
  .pic_box7{
    .price-scale{
      color: #333;
    }
  }
  .pic_box8{
    .price-scale{
      color: #c2a530;
    }
  }
}

</style>
